Next.jsのReact Hookへの最適化は一体何をしているのか

Next.jsはReact Hooksの最適化を行っている

Babelならば

swcならば

これらの変換はビルトインなhookに対してconst [a, b] = useState(...)をconst {0: a, 1: b} = useState(...)にするが，これが一体何を意味しているのかわからなかったtosuke.icon

一見して長くなっているように見えるし

ところでこの変換，RestElementが考慮されていないように見えるんだけど，どうなるんだろう？tosuke.icon

結論としては，@babel/plugin-transform-destructuringが配列として確定できない値について長大なPolyfillを吐くかららしい

https://scrapbox.io/files/622dc75a6006b3001dffff0d.png

オブジェクトにしてしまえば，こんな面倒なことは起こらない

https://scrapbox.io/files/622dc841684dfd001f5fcbfe.png

「まともな」配列が返ってくることが保証されているhookについて，@babel/plugin-transform-destructuringのlooseオプションを有効にしたときと同様の結果が得られるような変換を行っている